<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《强国记》商品详细页面</title>
	<script src="js/jquery-3.7.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/commodity.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/commodity.css">
	<link rel="stylesheet" href="indexcss/index.css">
	<link rel="stylesheet" href="indexcss/base.css">
</head>
<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-light navbar-expand-md bg-light heima_nav">
	    <div class="container-lg">
	        <div class="row justify-content-between" style="width: 100%;">
	            <a class="navbar-brand col-2" href="index.html">
	                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="45" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
	                  <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
	                </svg>
	            </a>
	            <div class="row justify-content-start" style="margin-right: -40px;">
	
	                <div class="navbar-nav1 user-info col-2">
	                    <div class="nav-item">
	                        <div class="dropdown show">
	                            <a class="nav-link1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	                            <img src="img/touxiang.png" alt="" class="user-img">
	                            <span class="caret">用户88888881</span>
	                            </a>
	                        
	                            <div class="dropdown-menu " aria-labelledby="dropdownMenuLink">
                                    <a class="dropdown-item" href="gwc.html">购物车</a>
                                    <a class="dropdown-item" href="usercenter.html">个人中心</a>
	                            <a class="dropdown-item" href="#">退出登录</a>
	                            </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	       
	        <div class="navbar-nav2 col-2 user-info" style="margin-right: 30px;">
	            <div class="nav-item">
	                <div class="dropdown show">
	                    <a class="nav-link1 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	                      <img src="img/touxiang.png" alt="" class="user-img">
	                      <span class="caret">用户88888881</span>
	                    </a>
	                  
	                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="gwc.html">购物车</a>
                            <a class="dropdown-item" href="usercenter.html">个人中心</a>
	                      <a class="dropdown-item" href="#">退出登录</a>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	</div> 
	</nav>
	
    <div class="container">
        <main>
            <section class="product">
            <div class="row">
                <div class="col-12 col-lg-6 col-md-6 col-sm-12 product-image-container">
                    <img src="./images/QiangGuoJi.jpg" alt="">
                    <div class="zoomed-image-container">
                        <div class="zoom-lens"></div>
                        <img src="./images/QiangGuoJi.jpg" alt="" class="zoomed-image">
                    </div>
                </div>
                <div class="col-12 col-lg-6 col-md-6 col-sm-12 product-details">
                    <h2>《强国记》</h2>
                    <br>
                    <p>出版社：<a href="javascript:;">电子工业出版社有限公司</a></p>
                    <p>作者：<a href="javascript:;">徐</a></p>
                    <p class="price">¥ 34.50</p>
                    <div class="quantity">
                        <span>数量</span>
                        <button class="minus btn btn-dark">-</button>
                        <input class="quantity-input" type="number" value="1" min="1">
                        <button class="plus btn btn-dark">+</button>
                    </div>
                    <a href="gwc.html"><button class="buy-later btn btn-outline-danger">加入购物车</button></a>
                    <button class="buy-now btn btn-warning">立即购买</button>
                </div>
            </div>
            </section>
            <section class="store-info">
                <h3>价格说明</h3>
                <ul>
                    <li>爱买价：为商品的销售价，具体的成交价可能因会员使用优惠券、银铃铛等发生变化，最终以订单结算页价格为准。</li>
                    <li>定价：是图书封底定价。</li>
                    <li>划线价：划线价为参考价，划线价格可能是图书封底定价或该商品曾经展示过的销售价等，由于地区、时间的差异化和市场行情波动，划线价可能会与您购物时展示的不一致，该价格仅供您参考。</li>
                    <li>折扣：折扣指在图书定价基础上计算出的优惠比例或优惠金额。如有疑问，您可在购买前联系客服咨询。</li>
                    <li>异常问题：如您发现活动商品销售价或促销信息有异常，请立即联系我们补正，以便您能顺利购物。</li>
                </ul>
            </section>
            <section class="related-products">
                <h3>相关推荐</h3>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
                    
                        <div class="card text-center mb-3">
                            <a href="HuanYouZhongGuo.html">
                                <img src="./images/HuanYouZhongGuo.jpg" class="card-img-top" alt="...">
                            </a>
                            <div class="card-body">
                                <h5 class="card-title">《环游中国》</h5>
                                <p class="card-text"><a href="javascript:;">地质出版社</a> 编 <a href="javascript:;">羽奕</a> 著</p>
                                <a href="HuanYouZhongGuo.html" class="btn btn-warning">立即购买</a>
                            </div>
                        </div>
                        
                            
                            <div class="card text-center mb-3">
                                <a href="ChenYu.html">
                                    <img src="./images/ChengYu.jpg" class="card-img-top" alt="...">
                                </a>
                                <div class="card-body">
                                  <h5 class="card-title">《一口气读完成语故事》</h5>
                                  <p class="card-text"><a href="javascript:;">北京时代华文书局</a> 编 <a href="javascript:;">羽奕</a> 著</p>
                                  <a href="ChenYu.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="JiaShan.html"><img src="./images/JiaShan.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《家山》</h5>
                                  <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">王跃文</a> 著</p>
                                  <a href="JiaShan.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="LunYu.html"><img src="./images/LunYu.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《给孩子的四书五经》</h5>
                                  <p class="card-text"><a href="javascript:;">民主与建设出版社</a> 编 <a href="javascript:;">陈仁谦</a> 著</p>
                                  <a href="LunYu.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="QiangGuoJi.html"><img src="./images/QiangGuoJi.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《强国记》</h5>
                                  <p class="card-text"><a href="javascript:;">电子工业出版社有限公司</a> 编 <a href="javascript:;">徐</a> 著</p>
                                  <a href="QiangGuoJi.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="QingYuNian.html"><img src="./images/QingYuNian.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《庆余年》</h5>
                                  <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">猫腻</a> 著</p>
                                  <a href="QingYuNian.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="WuJiangYin.html"><img src="./images/WuJiangYin.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《乌江引》</h5>
                                  <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">庞贝</a> 著</p>
                                  <a href="WuJiangYin.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="XiJinPin.html"><img src="./images/XiJinPin.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《习近平引用诗词释读》</h5>
                                  <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">诗词编写组</a> 著</p>
                                  <a href="XiJinPin.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="YangFan.html"><img src="./images/YangFan.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《样范》</h5>
                                  <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">龚曙光</a> 著</p>
                                  <a href="YangFan.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                            <div class="card text-center mb-3">
                                <a href="YanXiaLi.html"><img src="./images/YanXiaLi.jpg" class="card-img-top" alt="..."></a>
                                <div class="card-body">
                                  <h5 class="card-title">《烟霞里》</h5>
                                  <p class="card-text"><a href="javascript:;">人民文学出版社</a> 编 <a href="javascript:;">魏微</a> 著</p>
                                  <a href="YanXiaLi.html" class="btn btn-warning">立即购买</a>
                                </div>
                            </div>
                </div>
            </section>
        </main>
    </div>
</body>
</html>